<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Admin/Guest audio/video calling using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>
    var hash = window.location.hash.replace('#', '');
    if (!hash.length) {
        location.href = location.href + '#' + ((Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-'));
        location.reload();
    }
    </script>
    <link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
    <style>
    html {
        background: #eee;
    }
    
    body {
        font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
        font-size: 1.2em;
        line-height: 1.2em;
        margin: 0;
    }
    
    body {
        background: #fff;
        border: 1px solid;
        border-color: #ddd #aaa #aaa #ddd;
        border-radius: 5px;
        margin: .5em auto 0 auto;
        padding: .8em;
        padding-top: 0;
    }
    
    h1,
    h2 {
        border-bottom: 1px solid black;
        display: inline;
        font-weight: normal;
        line-height: 36px;
        padding: 0 0 3px 0;
    }
    
    h1 {
        background: rgb(238, 238, 238);
        border-bottom-width: 2px;
        display: block;
        margin-top: 0;
        padding: .3em;
        text-align: center;
    }
    
    button {
        -moz-border-radius: 3px;
        -moz-transition: none;
        -webkit-transition: none;
        background: #0370ea;
        background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
        background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
        border: 1px solid #076bd2;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: .8em;
        line-height: 1.3;
        padding: 5px 12px;
        text-align: center;
        text-shadow: 1px 1px 1px #076bd2;
    }
    
    button:hover {
        background: rgb(9, 147, 240);
    }
    
    button:active {
        background: rgb(10, 118, 190);
    }
    
    button[disabled] {
        background: none;
        border: 1px solid rgb(187, 181, 181);
        color: gray;
        text-shadow: none;
    }
    
    #remote-media-streams video {
        width: 10em;
    }
    
    #local-media-stream video {
        width: 34em;
    }
    
    footer {
        text-align: center;
    }
    
    code {
        color: rgb(204, 14, 14);
        font-family: inherit;
    }
    
    audio,
    video {
        vertical-align: bottom;
    }
    
    pre {
        border-left: 2px solid red;
        margin-left: 2em;
        padding-left: 1em;
    }
    
    a {
        color: #2844FA;
        text-decoration: none;
    }
    
    a:hover,
    a:focus {
        color: #1B29A4;
    }
    
    a:active {
        color: #000;
    }
    
    :-moz-any-link:focus {
        border: 0;
        color: #000;
    }
    
    ::selection {
        background: #ccc;
    }
    
    ::-moz-selection {
        background: #ccc;
    }
    
    .prompt-bar {
        background: rgb(255, 255, 255);
        border: 9px solid rgb(216, 216, 216);
        border-radius: 5px;
        bottom: 0;
        box-shadow: 0 0 5px, inset 0 0 2px;
        display: none;
        position: fixed;
        right: 0;
        width: 30%;
        z-index: 100;
    }
    
    .prompt-bar #header {
        border-bottom: 1px solid rgb(213, 211, 211);
        display: block;
        padding: .1em .6em;
    }
    
    .prompt-bar #body {
        padding: .2em .6em;
    }
    
    .prompt-bar #controls {
        background: rgb(175, 174, 174);
        border: 1px solid gray;
        text-align: center;
    }
    
    video {
        vertical-align: top;
        width: 48%;
    }
    </style>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection-v1.6.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/getMediaElement.min.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/socket.io.js">
    </script>
</head>

<body>
    <h1>
        Admin/Guest audio/video calling using / <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
    </h1>

    <p>
        <a href="https://www.webrtc-experiment.com/">HOME</a>
        <span> &copy; </span>
        <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
        <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
        <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
        <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
    </p>

    <div id="videos-container" style="text-align: center;"></div>
    <div style="text-align: center;">
        <button id="init-admin">I'm Admin</button>
        <button id="init-guest">I'm Guest</button>
    </div>
    <div class="prompt-bar">
        <h2 id="header">...</h2>
        <p id="body">...</p>
        <div id="controls">
            <button id="ok">...</button>
            <button id="cancel">x</button>
        </div>
    </div>
    <script>
    function initAdminOrGuest(userType) {
        window.connection = new RTCMultiConnection();

        connection.userType = userType;

        if (userType == 'guest') connection.onAdmin = onGuestOrUser;
        if (userType == 'admin') connection.onGuest = onGuestOrUser;

        function onGuestOrUser(user) {
            promptBar.style.display = 'block';
            promptBar.querySelector('#ok').disabled = false;

            promptBar.querySelector('#header').innerHTML = userType + ' is online';
            promptBar.querySelector('#body').innerHTML = 'Are you want to do audio/video call with ' + userType + '?';
            var ok = promptBar.querySelector('#ok');
            ok.innerHTML = 'Audio/Video Call';
            ok.onclick = function() {
                connection.request(user.userid);
                this.disabled = true;
            };

            promptBar.querySelector('#cancel').onclick = function() {
                promptBar.style.display = 'none';
            };
        }

        connection.onRequest = function(userid, extra) {
            promptBar.style.display = 'block';
            promptBar.querySelector('#ok').disabled = false;

            promptBar.querySelector('#header').innerHTML = 'New Request';
            promptBar.querySelector('#body').innerHTML = userid + ' requested you to receive his audio/video call. Are you want to accept his call?';
            var ok = promptBar.querySelector('#ok');
            ok.innerHTML = 'Receive Audio/Video Call';
            ok.onclick = function() {
                connection.accept(userid, extra);
                this.disabled = true;
            };

            promptBar.querySelector('#cancel').onclick = function() {
                promptBar.style.display = 'none';
                this.disabled = true;
            };
        };
        connection.onstats = function(stats, userinfo) {
            resetPromptBar();

            if (stats == 'busy') {
                promptBar.querySelector('#header').innerHTML = userType + ' is Busy';
                promptBar.querySelector('#body').innerHTML = userinfo.userid + ' is busy. Please wait..';
            }
            if (stats == 'accepted') {
                promptBar.querySelector('#header').innerHTML = 'Receiving';
                promptBar.querySelector('#body').innerHTML = userinfo.userid + ' is receiving your call..';
            }
        };

        connection.session = {
            audio: true,
            video: true
        };

        connection.openSignalingChannel = openSignalingChannel;

        connection.onstream = function(e) {
            var mediaElement = getMediaElement(e.mediaElement, {
                width: (videosContainer.clientWidth / 2) - 50,
                buttons: ['mute-audio', 'mute-video', 'record-audio', 'record-video', 'full-screen', 'volume-slider', 'stop'],
                onMuted: function(type) {
                    connection.streams[e.streamid].mute({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onUnMuted: function(type) {
                    connection.streams[e.streamid].unmute({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onRecordingStarted: function(type) {
                    connection.streams[e.streamid].startRecording({
                        audio: type == 'audio',
                        video: type == 'video'
                    });
                },
                onRecordingStopped: function(type) {
                    connection.streams[e.streamid].stopRecording(function(blob) {
                        var _mediaElement = document.createElement(type);

                        _mediaElement.src = URL.createObjectURL(blob);
                        _mediaElement = getMediaElement(_mediaElement, {
                            buttons: ['mute-audio', 'mute-video', 'stop']
                        });

                        _mediaElement.toggle(['mute-audio', 'mute-video']);

                        videosContainer.insertBefore(_mediaElement, videosContainer.firstChild);
                    }, type);
                },
                onStopped: function() {
                    connection.drop();
                }
            });

            videosContainer.insertBefore(mediaElement, videosContainer.firstChild);

            if (e.type == 'remote') {
                resetPromptBar();
                promptBar.style.display = 'none';
            }
        };

        connection.onstreamended = function(e) {
            if (e.mediaElement.parentNode && e.mediaElement.parentNode.parentNode && e.mediaElement.parentNode.parentNode.parentNode) {
                e.mediaElement.parentNode.parentNode.parentNode.removeChild(e.mediaElement.parentNode.parentNode);
            }
        };

        connection.connect();
    }

    function openSignalingChannel(config) {
        var SIGNALING_SERVER = 'https://socketio-signaling.herokuapp.com:443/';
        var channel = config.channel || this.channel;
        var sender = Math.round(Math.random() * 9999999999) + 9999999999;

        io.connect(SIGNALING_SERVER).emit('new-channel', {
            channel: channel,
            sender: sender
        });

        var socket = io.connect(SIGNALING_SERVER + channel);
        socket.channel = channel;

        socket.on('connect', function() {
            if (config.callback) config.callback(socket);
        });

        socket.send = function(message) {
            socket.emit('message', {
                sender: sender,
                data: message
            });
        };

        socket.on('message', config.onmessage);
    }

    document.getElementById('init-admin').onclick = function() {
        this.disabled = true;
        initAdminOrGuest('admin');
    };

    document.getElementById('init-guest').onclick = function() {
        this.disabled = true;
        initAdminOrGuest('guest');
    };

    var promptBar = document.querySelector('.prompt-bar');

    function resetPromptBar() {
        promptBar.style.display = 'block';
        promptBar.querySelector('#ok').disabled = true;

        promptBar.querySelector('#ok').innerHTML = '...';
        promptBar.querySelector('#header').innerHTML = '...';
        promptBar.querySelector('#body').innerHTML = '...';
    }

    var videosContainer = document.getElementById('videos-container');
    </script>
    <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
        <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
        <div>
            <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
        </div>
        <button id="send-message" style="font-size: 1em;">Send Message</button>
    </section>

    <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>

    <footer>
        <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
        <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
        <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
        <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
    </footer>

    <!-- commits.js is useless for you! -->
    <script src="//cdn.webrtc-experiment.com/commits.js" async>
    </script>
</body>

</html>